<template>
  <div class="header cl">
    <div class="logo">
      <div>珠海圓昌貿易有限公司</div>
      <!--<img src="../assets/images/logo.png" alt="">-->
    </div>
    <div class="name">
      <span>{{account}}</span>
      <span>，您好！</span>
      <span @click="exitShowBox = true" class="exit pointer">退出</span>
    </div>

    <!-- 退出系統彈窗 -->
    <transition name="boxFade">
      <div v-if="exitShowBox" class="exit_box">
        <div class="center">
          <div class="title">是否退出系統？</div>
          <div class="btns cl">
            <!-- 返回 -->
            <div @click="exitShowBox = false" class="pointer">
              <div class="icon">
                <img src="../assets/images/back_btn.png" alt="">
              </div>
              <div class="btn">返回</div>
            </div>
            <!-- 退出 -->
            <div @click="exit" class="pointer">
              <div class="icon">
                <img src="../assets/images/exit_btn.png" alt="">
              </div>
              <div class="btn">退出</div>
            </div>
          </div>
        </div>
      </div>
    </transition>

  </div>
</template>

<script>

export default {
  data() {
    return {
      account: window.localStorage.getItem("account"),
      exitShowBox: false //是否顯示退出系統的彈窗
    };
  },
  methods: {
    exit() {
      this.$router.push({ path: "/Login" });
      this.exitShowBox = false;
    }
  },
  created(){
    const url = `ws://47.106.195.108:1234`;
    //const url = `ws://192.168.2.110:1234`;
    let ws = new WebSocket(url);
    ws.onopen = function (res) {
      ws.send('');
      console.log('open');
    }
    ws.onmessage = res => {
      this.$emit('handlePageEvent','updateId',JSON.parse(res.data));
    }
    ws.onclose = function (res) {
      console.log('close');
    }
  }
};
</script>


<style lang="scss" scoped>
@import "../assets/css/common.scss";
// 頭部樣式
.header {
  min-width: $width;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding: 16px $contentPaddingRight 0 30px;
  border-bottom: 2px solid $mtColor;
  background-color: $bg;
  z-index: 3;
  .logo {
    float: left;
    height: 100%;
    line-height: 66px;
    width: 320px;
    color: #ffffff;
    font-size: 200%;
  }
  .name {
    float: right;
    height: 100%;
    color: $mtColor;
    line-height: 110px;
    text-align: right;
    .exit {
      padding: 0 4px;
      transition: all $transitionTime;
      &:hover {
        color: #fff;
      }
    }
  }
}

// 退出彈窗
.exit_box {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  text-align: center;
  & > div {
    min-width: 570px;
  }
  .title {
    font-size: 30px;
  }
  .btns {
    margin-top: 50px;
    & > div {
      width: 260px;
      height: 260px;
      float: left;
      .icon {
        width: 90px;
        height: 175px;
        margin: 0 auto;
        padding-top: 55px;
        transition: all $transitionTime;
      }
      &:hover .icon {
        transform: rotateY(180deg);
      }
      .btn {
        font-size: 28px;
        letter-spacing: 10px;
        text-indent: 15px;
      }
    }
    & > div:first-of-type {
      background-color: #64cfa4;
    }
    & > div:last-of-type {
      background-color: #27a6ad;
      margin-left: 50px;
    }
  }
}
</style>
